<ol class="breadcrumb">
    <li><a href="#">点单服务</a></li>
    <li>类目管理</li>
</ol>

<div class="panel panel-default">
    <div class="panel-heading">
        <span class="glyphicon glyphicon-pencil"></span>
        <span class="panel-title">编辑类目</span>
    </div>
    <% if(session.permissionMap[4012]){ %>
    <div class="panel-body">
        <div class="row">
            <form class="form-horizontal">
                <label class="control-label col-xs-2">目录所属</label>

                <div class="col-xs-9">
                    <select name="suid" class="form-control">
                        <option value="">请选择目录所属用户</option>
                        <% users.forEach(function(el, index, list){ %>
                        <option value="<%= el._id %>"><%= el.user %></option>
                        <% }); %>
                    </select>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('[name="suid"]').change(function () {
                //加载一级目录
                loadLevel(1, '');
            });
        });
    </script>
    <% } %>
    <div class="panel-body" id="categories">
        <div class="alert alert-warning" role="alert">
            请点击任意一级目录以编辑下一级目录。
        </div>
    </div>
</div>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><i class="icon-pencil"></i><span>??目录</span></h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="hidden" name="category_id" value=""/>
                    <input type="text" name="name" class="form-control" placeholder="请输入目录名称"/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<div id="templates" style="display: none;">
    <li id="item-template" class="list-group-item" style="cursor: pointer;">
        <span>咖啡饮品</span>
        <% if(session.permissionMap[4001]){ %>
        <a href="#" class="icon-trash pull-right" style="margin: 4px;"></a>
        <% } %>
        <% if(session.permissionMap[4002]){ %>
        <a href="#" class="icon-pencil pull-right" style="margin: 4px 8px 0 0;"></a>
        <% } %>
    </li>

    <div id="category-template" class="col-xs-3">
        <div class="panel panel-info">
            <div class="panel-heading">
                <span class="panel-title">xxx目录</span>
                <% if(session.permissionMap[4000]){ %>
                <a href="#" class="icon-plus pull-right" style="margin-top: 4px;"></a>
                <% } %>
            </div>
            <ul class="list-group">
                <li href="#" class="list-group-item loadding">
                    <span>加载中...</span>
                </li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        <% if(!session.permissionMap[4012]){ %>
        //加载一级目录
        loadLevel(1, '');
        <%}%>
        //初始化modal
        initModal();
    });

    function initModal() {
        //绑定保存按钮
        $('.modal-footer .btn-primary').click(function () {
            var action_type = $(this).data('action_type');
            if (action_type == 'edit') {
                editCategory();
            } else {
                addCategory();
            }
        });

        function editCategory() {
            //获得数据
            var category_id = $('.modal-body [name="category_id"]').val();
            var name = $('.modal-body [name="name"]').val();

            //验证数据
            if (name) {
                //发送请求
                $.ajax({
                    method: 'PUT',
                    url: '/cafe/category/edit/' + category_id,
                    data: {
                        name: name
                    },
                    type: 'json',
                    success: function (res) {
                        if (res.success) {
                            //刷新目录列表
                            $('#category-id-' + category_id + ' span').text(name);
                            //隐藏弹出框
                            $('#myModal').modal('hide');
                        } else {
                            alert(res.msg);
                        }
                    }
                });
            }
        }

        function addCategory() {

            //获得数据
            var parent_id = $('.modal-body [name="category_id"]').val();
            var name = $('.modal-body [name="name"]').val();
            var user_id = $('[name="suid"]').val();
            //验证数据
            if (name) {
                //发送请求
                $.post('/cafe/category/create', {
                    suid: user_id,
                    name: name,
                    parent: parent_id
                }, function (res) {
                    if (res.success) {
                        //刷新目录列表
                        newCategory(res.data);
                        //隐藏弹出框
                        $('#myModal').modal('hide');
                    } else {
                        alert(res.msg);
                    }
                }, 'json');
            }
        }
    }

    function newCategory(category) {
        //获得panel
        var newPanelId = 'level-' + category.level;
        var levelPanel = $('#' + newPanelId);
        //判断是否有目录数据
        if (levelPanel.find('.list-group .loadding,.list-group .add').length > 0) {
            levelPanel.find('.list-group').empty();
        }
        //增加目录
        var item = $('#item-template').clone();
        item.attr('id', 'category-id-' + category._id);
        item.find('span').text(category.name);
        item.data('category-id', category._id);
        item.data('category-name', category.name);
        levelPanel.find('.list-group').append(item);
        item.click(function () {
            //目前除了1级目录可以有下属目录
            if (category.level == 1) {
                loadLevel(2, category._id);
            }
            //选中被点击目录
            levelPanel.find('.list-group .list-group-item-warning').removeClass('list-group-item-warning');
            item.addClass('list-group-item-warning');
        });
        //删除事件
        item.find('.icon-trash').click(function (event) {
            event.stopPropagation();
            if (confirm("您确定要删除目录吗？")) {
                $.ajax({
                    method: 'DELETE',
                    url: '/cafe/category/remove/' + category._id,
                    success: function (res) {
                        if (res.success) {
                            //删除列表项
                            item.remove();
                            //删除目录列表
                            $('#level-' + (category.level + 1)).remove();
                            //当目录列表为0则显示提示
                            if (levelPanel.find('.list-group li').length == 0) {
                                levelPanel.find('.list-group').append('<li href="#" class="list-group-item add">请添加...</li>');
                            }
                        }
                    }
                });
            }
        });
        //编辑事件
        item.find('.icon-pencil').click(function (event) {
            event.stopPropagation();
            //绑定弹出框数据
            var modal = $('#myModal');
            //设置弹出框
            modal.find('.modal-title span').text('编辑目录');
            modal.find('.modal-footer .btn-primary').data('action_type', 'edit');
            modal.find('.modal-body [name="name"]').val(category.name);
            modal.find('.modal-body [name="category_id"]').val(category._id);
            //显示弹出框
            modal.modal('show');
        });

    }

    function loadLevel(level, parent_id) {

        var newPanelId = 'level-' + level;
        var user_id = $('[name="suid"]').val();

        //获得目录面板的模板
        var levelPanel = $('#category-template').clone();
        levelPanel.attr('id', newPanelId);//设置ID
        levelPanel.attr('level', level);//设置目录级数
        levelPanel.find('.panel-title').text(level + '级目录');//设置面板标题
        levelPanel.find('.panel-heading .icon-plus').data('parent_id', parent_id);

        //清除子级目录
        $('#level-' + (level + 1)).remove();

        //删除旧列表增加新列表
        var oldPanel = $('#' + newPanelId);
        if (oldPanel.length > 0) {
            oldPanel.before(levelPanel);
            oldPanel.remove();
        } else {
            $('#categories').append(levelPanel);
        }

        //添加目录
        levelPanel.find('.panel-heading .icon-plus').click(function () {
            //绑定弹出框数据
            var modal = $('#myModal');
            //设置弹出框
            modal.find('.modal-title span').text('添加目录');
            modal.find('.modal-footer .btn-primary').data('action_type', 'create');
            modal.find('.modal-body [name="name"]').val('');
            modal.find('.modal-body [name="category_id"]').val(parent_id);
            //显示弹出框
            modal.modal('show');
        });

        //获取目录数据
        $.get('/cafe/category/categories', {suid: user_id, parent: parent_id}, function (res) {

            if (!res.success) {
                return;//请求失败
            }

            //清空列表
            levelPanel.find('.list-group').empty();

            if (res.data.length > 0) {
                //逐个添加一级目录
                $.each(res.data, function (index, category) {
                    newCategory(category);
                });
            } else {
                levelPanel.find('.list-group').append('<li href="#" class="list-group-item add">请添加...</li>');
            }
        });
    }
</script>